<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <table border="1" width="400">
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
    </table>
</body>
<script>
    var atd = document.querySelectorAll("table td")


    for(var i=0;i<atd.length;i++){
        // 每个td绑定事件
        atd[i].onclick = function(){
            // 创建输入框
            var ipt = document.createElement("input");
            // 设置输入框内容为td内容
            ipt.value = this.innerHTML;
            // 清空td内容
            this.innerHTML = "";
            // 将输入框插入到td
            this.appendChild(ipt);
            // 取消输入框的事件冒泡
            ipt.onclick = function(eve){
                var e = eve || window.event;
                e.stopPropagation();
            }
            // 保存原td
            var td = this;
            // 输入框失去焦点时，将输入框内容存回原td
            ipt.onblur = function(){
                // innerHTML会覆盖原有内容，所以不用单独删除输入框
                td.innerHTML = this.value;
            }
        }
    }


</script>
</html>